<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>作文品读</title>
	<link rel="stylesheet" type="text/css" href="../plug/swiper/css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="../plug/layui/css/layui.css">
	<link rel="stylesheet" type="text/css" href="../css/style.css">
	<link rel="stylesheet" type="text/css" href="../css/color.css">
	<link rel="stylesheet" type="text/css" href="../font/iconfont.css">
</head>
<!-- 注意body的class -->
<body class="">
	<!-- 加载层 -->
	<div class="load_contain m_flex_box flex_vc flex_hc">
		<svg width="58" height="58" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg">
   		 	<g fill="none" fill-rule="evenodd">
        		<g transform="translate(2 1)" stroke="#FFF" stroke-width="1.5">
		            <circle cx="42.601" cy="11.462" r="5" fill-opacity="1" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="1;0;0;0;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="49.063" cy="27.063" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;1;0;0;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="42.601" cy="42.663" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;1;0;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="27" cy="49.125" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;1;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="11.399" cy="42.663" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;1;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="4.938" cy="27.063" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;0;1;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="11.399" cy="11.462" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;0;0;1;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="27" cy="5" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;0;0;0;1" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		        </g>
		    </g>
		</svg>
	</div>
	<!-- 头部 -->
	<nav class="top_nav pos_f bg_yellow">
		<a href="javascript:history.go(-1)" class="top_a nav_left">
			<i class="iconfont icon-left"></i>
		</a>
		<p class="nav_top_center">作文品读</p>
		<div href="javascript:void(0)" class="top_a nav_right">
			<a href="work_sc.html">
				<img src="../img//top_sc.png" class="top_img_sc two">
			</a>
			<i class="iconfont icon-more"></i>
		</div>
	</nav>
	<div class="padd_top"></div>
	<!-- 首页tab -->
	<ul class="index_navbar m_flex_box flex_hc">
		<li class="index_navbar_li m_flex_box flex_vc flex_hc active">
			<img src="../img/tj.png" alt="" class="navbar_icon">
			<span>优当推荐</span>
		</li>
		<li class="index_navbar_li m_flex_box flex_vc flex_hc">
			<img src="../img/all.png" alt="" class="navbar_icon">
			<span>全部分类</span>
		</li>
	</ul>
	<!-- 首页切换部分 -->
	<div class="swiper-container index_swiper_contain">
		<div class="swiper-wrapper">
			<!-- 优当推荐 -->
			<div class="swiper-slide index_contain_slide">
				<!-- 作文指导 -->
				<div class="mar_b">
					<div class="tit_contain">
						<div class="index_tit m_flex_box flex_vc flex_hc">
							<img src="../img/zd.png">
							<p>作文指导</p>
						</div>
						<a href="direct.html" class="more_href">
							<span>全部</span>
							<i class="iconfont icon-right"></i>
						</a>
					</div>
					<div class="swiper-container index-swiper-inner">
						<div class="swiper-wrapper">
							<div class="swiper-slide index-swiper-inner-slide m_flex_box flex_hc">
								<a href="direct.html" class="index-top-two">
									<div class="cover_div index_cover_txt m_flex_box flex_vc flex_hc">
										<span>小学作文指导</span>
									</div>
									<img src="../img/1.png">
								</a>
								<a href="direct.html" class="index-top-two">
									<div class="cover_div index_cover_txt m_flex_box flex_vc flex_hc">
										<span>小学作文指导</span>
									</div>
									<img src="../img/1.png">
								</a>
							</div>
							<div class="swiper-slide index-swiper-inner-slide m_flex_box flex_hc">
								<a href="direct.html" class="index-top-two">
									<div class="cover_div index_cover_txt m_flex_box flex_vc flex_hc">
										<span>小学作文指导</span>
									</div>
									<img src="../img/1.png">
								</a>
								<a href="direct.html" class="index-top-two">
									<div class="cover_div index_cover_txt m_flex_box flex_vc flex_hc">
										<span>小学作文指导</span>
									</div>
									<img src="../img/1.png">
								</a>
							</div>
						</div>
						<div class="swiper-pagination swiper-pagination-white"></div>
					</div>
				</div>
				<!-- 作文指导end -->
				<!-- 每日推荐 -->
				<div class="mar_b bg_click">
					<div class="index_tit bor_b m_flex_box flex_vc flex_hc">
						<img src="../img/ttj.png">
						<p>每日推荐</p>
					</div>
					<a href="" class="index_tj">
						<div class="index_tj_tit m_flex_box flex_vc flex_jz">
							<div class="index_tj_left m_flex_box flex_vc">
								<img src="../img/good.png" alt="">
								<p>四季如画</p>
							</div>
							<div class="index_tj_right">
								<span>初中</span>
								<span>记述文</span>
								<span>1370字</span>
							</div>
						</div>
						<p class="index_tj_intro">请以身边风景也动人为题写一篇800字作文请以身边风景也动人为题写一篇800字作文请以身边风景也动人为题写一篇800字作文请以身边风景也动人为题写一篇800字作文请以身边风景也动人为题写一篇800字作文请以身边风景也动人为题写一篇800字作文请以身边风景也动人为题写一篇800字作文</p>
					</a>
				</div>
				<!-- 每日推荐end -->
				<!-- 小学作文推荐 -->
				<div class="index_recommend mar_b">
					<div class="index_recommend_tit bor_b m_flex_box flex_jz">
						<div class="index_recommend_left m_flex_box flex_vc">
							<img src="../img/sq.png">
							<p>小学作文推荐</p>
						</div>
						<a href="shangxin.html" class="more_recommend m_flex_box flex_vc">
							<span>查看更多</span>
							<i class="iconfont icon-right"></i>
						</a>
					</div>
					<div class="index_recommend_list col_ori">
						<a href="work_detail.html" class="m_flex_box flex_vc index_recommend_list_a">
							<span class="index_recommend_list_left">[二年级叙事作文]</span>
							<div class="index_recommend_list_contain m_flex_box">
								<span class="index_recommend_list_intro">钢铁是怎样练成的读后感</span>
								<span class="index_recommend_list_num">(1000字)</span>
							</div>
						</a>
						<a href="work_detail.html" class="m_flex_box flex_vc index_recommend_list_a">
							<span class="index_recommend_list_left">[二年级叙事作文]</span>
							<div class="index_recommend_list_contain m_flex_box">
								<span class="index_recommend_list_intro">钢铁是怎样练成的读后感</span>
								<span class="index_recommend_list_num">(1000字)</span>
							</div>
						</a>
						<a href="work_detail.html" class="m_flex_box flex_vc index_recommend_list_a">
							<span class="index_recommend_list_left">[二年级叙事作文]</span>
							<div class="index_recommend_list_contain m_flex_box">
								<span class="index_recommend_list_intro">钢铁是怎样练成的读后感Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa numquam eos distinctio officia magni ipsam quam molestias fugit quis iusto reprehenderit iste sit necessitatibus consequuntur, dolore amet maxime pariatur?</span>
								<span class="index_recommend_list_num">(1000字)</span>
							</div>
						</a>
						<a href="work_detail.html" class="m_flex_box flex_vc index_recommend_list_a">
							<span class="index_recommend_list_left">[二年级叙事作文]</span>
							<div class="index_recommend_list_contain m_flex_box">
								<span class="index_recommend_list_intro">钢铁是怎样练成的读后感</span>
								<span class="index_recommend_list_num">(1000字)</span>
							</div>
						</a>
					</div>
				</div>
				<!-- 小学作文推荐end -->
				<div class="index_recommend mar_b">
					<div class="index_recommend_tit bor_b m_flex_box flex_jz">
						<div class="index_recommend_left m_flex_box flex_vc">
							<img src="../img/sq.png">
							<p>初中作文推荐</p>
						</div>
						<a href="work_detail.html" class="more_recommend m_flex_box flex_vc">
							<span>查看更多</span>
							<i class="iconfont icon-right"></i>
						</a>
					</div>
					<div class="index_recommend_list col_green">
						<a href="work_detail.html" class="m_flex_box flex_vc index_recommend_list_a">
							<span class="index_recommend_list_left">[二年级叙事作文]</span>
							<div class="index_recommend_list_contain m_flex_box">
								<span class="index_recommend_list_intro">钢铁是怎样练成的读后感</span>
								<span class="index_recommend_list_num">(1000字)</span>
							</div>
						</a>
						<a href="work_detail.html" class="m_flex_box flex_vc index_recommend_list_a">
							<span class="index_recommend_list_left">[二年级叙事作文]</span>
							<div class="index_recommend_list_contain m_flex_box">
								<span class="index_recommend_list_intro">钢铁是怎样练成的读后感</span>
								<span class="index_recommend_list_num">(1000字)</span>
							</div>
						</a>
						<a href="work_detail.html" class="m_flex_box flex_vc index_recommend_list_a">
							<span class="index_recommend_list_left">[二年级叙事作文]</span>
							<div class="index_recommend_list_contain m_flex_box">
								<span class="index_recommend_list_intro">钢铁是怎样练成的读后感Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa numquam eos distinctio officia magni ipsam quam molestias fugit quis iusto reprehenderit iste sit necessitatibus consequuntur, dolore amet maxime pariatur?</span>
								<span class="index_recommend_list_num">(1000字)</span>
							</div>
						</a>
						<a href="work_detail.html" class="m_flex_box flex_vc index_recommend_list_a">
							<span class="index_recommend_list_left">[二年级叙事作文]</span>
							<div class="index_recommend_list_contain m_flex_box">
								<span class="index_recommend_list_intro">钢铁是怎样练成的读后感</span>
								<span class="index_recommend_list_num">(1000字)</span>
							</div>
						</a>
					</div>
				</div>
				<div class="index_recommend mar_b">
					<div class="index_recommend_tit bor_b m_flex_box flex_jz">
						<div class="index_recommend_left m_flex_box flex_vc">
							<img src="../img/sq.png">
							<p>高中作文推荐</p>
						</div>
						<a href="" class="more_recommend m_flex_box flex_vc">
							<span>查看更多</span>
							<i class="iconfont icon-right"></i>
						</a>
					</div>
					<div class="index_recommend_list col_or">
						<a href="work_detail.html" class="m_flex_box flex_vc index_recommend_list_a">
							<span class="index_recommend_list_left">[二年级叙事作文]</span>
							<div class="index_recommend_list_contain m_flex_box">
								<span class="index_recommend_list_intro">钢铁是怎样练成的读后感</span>
								<span class="index_recommend_list_num">(1000字)</span>
							</div>
						</a>
						<a href="work_detail.html" class="m_flex_box flex_vc index_recommend_list_a">
							<span class="index_recommend_list_left">[二年级叙事作文]</span>
							<div class="index_recommend_list_contain m_flex_box">
								<span class="index_recommend_list_intro">钢铁是怎样练成的读后感</span>
								<span class="index_recommend_list_num">(1000字)</span>
							</div>
						</a>
						<a href="work_detail.html" class="m_flex_box flex_vc index_recommend_list_a">
							<span class="index_recommend_list_left">[二年级叙事作文]</span>
							<div class="index_recommend_list_contain m_flex_box">
								<span class="index_recommend_list_intro">钢铁是怎样练成的读后感Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa numquam eos distinctio officia magni ipsam quam molestias fugit quis iusto reprehenderit iste sit necessitatibus consequuntur, dolore amet maxime pariatur?</span>
								<span class="index_recommend_list_num">(1000字)</span>
							</div>
						</a>
						<a href="work_detail.html" class="m_flex_box flex_vc index_recommend_list_a">
							<span class="index_recommend_list_left">[二年级叙事作文]</span>
							<div class="index_recommend_list_contain m_flex_box">
								<span class="index_recommend_list_intro">钢铁是怎样练成的读后感</span>
								<span class="index_recommend_list_num">(1000字)</span>
							</div>
						</a>
					</div>
				</div>
				<div class="index_recommend">
					<div class="index_recommend_tit bor_b m_flex_box flex_jz">
						<div class="index_recommend_left m_flex_box flex_vc">
							<img src="../img/sq.png">
							<p>英语作文推荐</p>
						</div>
						<a href="" class="more_recommend m_flex_box flex_vc">
							<span>查看更多</span>
							<i class="iconfont icon-right"></i>
						</a>
					</div>
					<div class="index_recommend_list col_blue">
						<a href="work_detail.html" class="m_flex_box flex_vc index_recommend_list_a">
							<span class="index_recommend_list_left">[二年级叙事作文]</span>
							<div class="index_recommend_list_contain m_flex_box">
								<span class="index_recommend_list_intro">钢铁是怎样练成的读后感</span>
								<span class="index_recommend_list_num">(1000字)</span>
							</div>
						</a>
						<a href=work_detail.html" class="m_flex_box flex_vc index_recommend_list_a">
							<span class="index_recommend_list_left">[二年级叙事作文]</span>
							<div class="index_recommend_list_contain m_flex_box">
								<span class="index_recommend_list_intro">钢铁是怎样练成的读后感</span>
								<span class="index_recommend_list_num">(1000字)</span>
							</div>
						</a>
						<a href="work_detail.html" class="m_flex_box flex_vc index_recommend_list_a">
							<span class="index_recommend_list_left">[二年级叙事作文]</span>
							<div class="index_recommend_list_contain m_flex_box">
								<span class="index_recommend_list_intro">钢铁是怎样练成的读后感Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa numquam eos distinctio officia magni ipsam quam molestias fugit quis iusto reprehenderit iste sit necessitatibus consequuntur, dolore amet maxime pariatur?</span>
								<span class="index_recommend_list_num">(1000字)</span>
							</div>
						</a>
						<a href="work_detail.html" class="m_flex_box flex_vc index_recommend_list_a">
							<span class="index_recommend_list_left">[二年级叙事作文]</span>
							<div class="index_recommend_list_contain m_flex_box">
								<span class="index_recommend_list_intro">钢铁是怎样练成的读后感</span>
								<span class="index_recommend_list_num">(1000字)</span>
							</div>
						</a>
					</div>
				</div>
			</div>
			<!-- 优当推荐end -->
			<!-- 全部分类 -->
			<div class="swiper-slide index_contain_slide">
				<div class="all_top m_flex_box flex_hc">
					<a href="tjbd.html" class="all-top-two">
						<div class="cover_div index_cover_txt">
							<p class="big">推荐榜</p>
							<p class="small">Recommend</p>
						</div>
						<img src="../img/1.png">
					</a>
					<a href="shangxin.html" class="all-top-two">
						<div class="cover_div index_cover_txt">
							<p class="big">上新榜</p>
							<p class="small">New Release</p>
						</div>
						<img src="../img/1.png">
					</a>
				</div>
				<p class="all_middle">分类</p>
				<div class="all_list m_flex_box flex_vw">
					<a href="kind_detail.html" class="all_list_inner">
						<div class="cover_div all_list_cover">
							<span>一年级</span>
						</div>
						<img src="../img/2.png">
					</a>
					<a href="kind_detail.html" class="all_list_inner">
						<div class="cover_div all_list_cover">
							<span>一年级</span>
						</div>
						<img src="../img/2.png">
					</a>
					<a href="kind_detail.html" class="all_list_inner">
						<div class="cover_div all_list_cover">
							<span>一年级</span>
						</div>
						<img src="../img/2.png">
					</a>
					<a href="kind_detail.html" class="all_list_inner">
						<div class="cover_div all_list_cover">
							<span>一年级</span>
						</div>
						<img src="../img/2.png">
					</a>
					<a href="" class="all_list_inner">
						<div class="cover_div all_list_cover">
							<span>一年级</span>
						</div>
						<img src="../img/2.png">
					</a><a href="" class="all_list_inner">
						<div class="cover_div all_list_cover">
							<span>一年级</span>
						</div>
						<img src="../img/2.png">
					</a>
					<a href="" class="all_list_inner">
						<div class="cover_div all_list_cover">
							<span>一年级</span>
						</div>
						<img src="../img/2.png">
					</a>
					<a href="" class="all_list_inner">
						<div class="cover_div all_list_cover">
							<span>一年级</span>
						</div>
						<img src="../img/2.png">
					</a>
					<a href="" class="all_list_inner">
						<div class="cover_div all_list_cover">
							<span>一年级</span>
						</div>
						<img src="../img/2.png">
					</a>
					<a href="" class="all_list_inner">
						<div class="cover_div all_list_cover">
							<span>一年级</span>
						</div>
						<img src="../img/2.png">
					</a>
					<a href="" class="all_list_inner">
						<div class="cover_div all_list_cover">
							<span>一年级</span>
						</div>
						<img src="../img/2.png">
					</a>
					<a href="" class="all_list_inner">
						<div class="cover_div all_list_cover">
							<span>一年级</span>
						</div>
						<img src="../img/2.png">
					</a>
					<a href="" class="all_list_inner">
						<div class="cover_div all_list_cover">
							<span>一年级</span>
						</div>
						<img src="../img/2.png">
					</a>
					<a href="" class="all_list_inner">
						<div class="cover_div all_list_cover">
							<span>一年级</span>
						</div>
						<img src="../img/2.png">
					</a>
					<a href="kind_detail.html" class="all_list_inner">
						<div class="cover_div all_list_cover">
							<span>一年级</span>
						</div>
						<img src="../img/2.png">
					</a>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="../plug/UI/js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="../plug/layui/layui.all.js"></script>
	<script type="text/javascript" src="../plug/lazy/jquery.lazyload.min.js"></script>
	<script type="text/javascript" src="../js/clamp.min.js"></script>
	<script type="text/javascript" src="../plug/swiper/js/swiper.jquery.min.js"></script>
	<script type="text/javascript" src="../js/reset_font.js"></script>
	<script type="text/javascript" src="../js/public.js"></script>
	<script type="text/javascript">
	    for(var i = 0;i<$(".index_tj_intro").length;i++){
	    	$clamp($(".index_tj_intro")[i], {clamp: 2});
	    }
		function lazyImg(){
			$("img.lazy").lazyload({
	      		effect: "fadeIn",
	      		skip_invisible:false,
		    });
		};
		setTimeout(function(){
			var swiper_contain = new Swiper('.index_swiper_contain', {
				onSlideChangeStart: function(){
					var _index= swiper_contain.activeIndex;
					$(".index_navbar_li").eq(_index).addClass("active").siblings().removeClass('active');
				},
		        paginationClickable: true,
		        spaceBetween: 21,
	      		autoHeight: true,
			});
			var swiper_tab = new Swiper('.index-swiper-inner', {
		        pagination: '.swiper-pagination',
		        paginationClickable: true,
		        spaceBetween: 21,

			});
			$(".index_navbar").on("click",".index_navbar_li",function(){
				$(this).addClass("active").siblings().removeClass('active');
				var _index = $(this).index();
				swiper_contain.slideTo(_index, 300,false);
			})
		},500)
	</script>
</body>
</html>